<template>
 <div class="payWraps">
     <x-header style="position:fixed;top:0px;width:100%;z-index:1000">订单支付</x-header>
    <!-- <div class="pay_price">
        <div class="pay_all">订单总额:  <span id="mons">￥978.00</span></div>
        <div class="pay_another">还需支付 <span class="price_">￥978.00</span></div>
    </div> -->
    <!-- <div class="pay_way">
        <div class="pay_tip">选择支付方式（建议微信支付）</div>
        <div class="pay_ways">
            <div><img src="static/cart/wx@2x.png" alt=""></div>
            <div><img src="static/cart/zfb@2x.png" alt=""></div>
        </div>
    </div> -->
    <div class="checkPayWays">
       <div class="aboutWx">
            <div class="infoItem">
              <div class="infoIcons"><img src="static/cart/wxicon.png" alt=""></div>
              <div class="infoTitles  marginDiv">支付方式</div>
              <div class="mustchoose" ><div class="">必选</div></div>
          </div>
      </div>
        <div class="infoItem">
            <div class="infoIcons">
      <check-icon :value.sync="wxpayment" type="plain"></check-icon>
          
      </div>
          <div class="infoTitles marginDiv">微信支付</div>
      
      </div> 
    </div>
     
    
    <!-- <div class="fudai" v-show="showFu"><img src="static/cart/fu.png" alt=""> <div class="fudai_none"></div></div> -->
    <!--确认支付 -->
    <!-- <div class="payConfirm" @click="payConfirm"> -->
    <div class="payConfirm" @click="payConfirm">
        <div class="zhifuMoney">支付：￥{{totileMoney}}</div>
        <div class="goFukuan">付款</div>
    </div>
     <toast v-model="show1" @on-hide="onHide">{{message}}</toast>
    <!-- <div>im</div> -->
      <div v-transfer-dom>
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '60%', 'background-color': 'transparent'}">
        <p style="color:#fff;text-align:center;" @click="showDialogStyle = false">
          <span>
          <img src="static/cart/fudai.png" style="max-width:60%">            
          </span>
          <br>
          <br>
          <!-- <x-icon type="ios-close-outline" style="fill:#fff;"> -->
            <span class="vux-close" @click="fudaiShop(fuDaiGoodsid)"><img src="static/cart/i_ico_del.png" alt=""></span>
          <!-- </x-icon> -->
        </p>
      </x-dialog>
    </div>
 </div>
</template>

<script>
import {
  Scroller,
  Group,
  XInput,
  XHeader,
  Divider,
  Spinner,
  XButton,
  Cell,
  LoadMore,
  Toast,
  XDialog,
  CheckIcon,
  TransferDomDirective as TransferDom
} from "vux";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";
import { setTimeout } from "timers";
export default {
  directives: {
    TransferDom
  },
  components: {
    Scroller,
    Divider,
    Spinner,
    XButton,
    Group,
    Cell,
    XInput,
    LoadMore,
    XHeader,
    Toast,
    XDialog,
    CheckIcon
  },
  data() {
    return {
      shopsData: this.$route.params.shopsData,
      show1: false,
      message: "",
      showFu: false,
      showDialogStyle: false,
      wxpayment:true,
       wxOpenId:localStorage.getItem("openid"),
       fuDaiGoodsid:"",
       totileMoney:""
    };
  },
  methods: {
    payMoney() {
      console.log("000000000000000000000")
      console.log(this.shopsData);
      this.totileMoney=this.shopsData[0].goodsMonery
    },
    onHide() {
      console.log("on hide");
    },
    payConfirm() {
      setTimeout(() => {
        this.payMoneyFn();
      }, 800);
    },
    payMoneyFn() {
      //   console.log("hhhhh");
      axios.post(homeUrl() + "weixinPayFn/", { emulateJSON: true }).then(
        result => {
          console.log(result);
          if (result.data.status == "ok") {
            this.userInfoChange();
            // this.fudai()
            this.$vux.toast.show({
              text: "支付成功",
              onShow() {
                console.log("Plugin: I'm showing");
              },
              onHide() {
                console.log("Plugin: I'm hiding");
                this.show1 = false;
              }
            });
            // 福袋
            this.fudaiReq();
            // 添加购买记录
            this.buyHistory();
            // 减少库存
            this.kucunReq();
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    //   用户积分、返利更改
    userInfoChange() {
      var datas = qs.stringify({
        wxid: this.wxOpenId,
        optionName: JSON.stringify(["buyMoney"]),
        optionNumber: "[100]"
      });
      axios
        .post(homeUrl() + "addUserSomeNumber/", datas, { emulateJSON: false })
        .then(
          result => {
            console.log(result);
            //    if(result.data.status=="ok"){

            //    }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 福袋随机
    fudaiReq() {
      this.$http.get(homeUrl() + "getOneRandomFudai/").then(
        result => {
          console.log("pppppppppppooooooooooo2")
          console.log(result);
          if (result.data.status == "ok") {
            this.showDialogStyle = true;
            this.fuDaiGoodsid=result.data.data.goodsInfo.goodsid
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    // 增加购买记录
    buyHistory() {
      // console.log("pppppppppoooooooooo");
      // console.log(this.shopsData);
      // console.log( this.shopsData[0])
      
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs",
        goodsid: this.shopsData[0].goodsId,
        goodsname: this.shopsData[0].goodsName,
        number: this.shopsData[0].goodsNumber,
        goodsimage: this.shopsData[0].goodsImage,
        goodsparams1: "www",
        goodsparams2: "000",
       shopname: this.shopsData[0].shopName,
        goodsprice: this.shopsData[0].goodsPrice,
        goodsproprice: this.shopsData[0].goodsProPrice,
      });
      axios
        .post(homeUrl() + "buyhistoryAdd/", datas, { emulateJSON: true })
        .then(
          result => {
            console.log("消费记录1");
            console.log(result);
            // if (result.data.status == "ok") {
            //   this.messShow = true;
            //   this.message = "删除成功";
            // }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 库存信息(暂时还有问题)
    kucunReq() {
      var datas = qs.stringify({
        goodsid: "654321",
        optionName: JSON.stringify(["sellcount", "counts"]),
        optionNumber: "[1,2]"
      });
      axios
        .post(homeUrl() + "modifyGoodsSomeNumber/", datas, {
          emulateJSON: false
        })
        .then(
          result => {
            console.log(result);
            //    if(result.data.status=="ok"){
            //    }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    }
    ,
    // 福袋商品
    fudaiShop(id){
        this.$router.push({
        name: "goods_detail",
        params: {
          goodsId: id
        }
      });
    }
  },
  created() {
    this.payMoney();
  }
};
</script>

<style>
.pay_price {
  margin-top: 2.875rem;
  width: 100%;
  height: 9.4375rem;
  background: #ffffff;
  font-size: 0.9375rem;
}
.pay_all {
  height: 6.1875rem;
  line-height: 6.1875rem;
  border-bottom: 1px solid #ebebeb;
  text-align: center;
}
.pay_another {
  line-height: 3.125rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.price_ {
  float: right;
  color: #e60012;
}
.pay_way {
  width: 100%;
  height: 9.4375rem;
  margin-top: 0.625rem;
  background: #ffffff;
}
.pay_tip {
  border-bottom: 1px solid #ebebeb;
  height: 3.125rem;
  line-height: 3.125rem;
  color: #999999;
  font-size: 0.75rem;
  padding-left: 0.625rem;
}
.pay_ways {
  display: flex;
}
.pay_ways div {
  flex: 1;
  text-align: center;
  padding-top: 1.5625rem;
}
.pay_ways div img {
  width: 2.875rem;
  height: 2.875rem;
}
#mons {
  color: #333333;
  font-size: 1.25rem;
  font-weight: 500;
}
.pay_introduce {
  font-size: 0.8125rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  color: #666666;
  padding-top: 1.25rem;
}
.pay_introduce p:nth-child(1) {
  color: #e60012;
}
.pay_introduce p:nth-child(2) {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.payConfirm {
  width: 100%;
  height: 2.875rem;
  background: #ffffff;
  /* color: #999999; */
  font-size: 0.9375rem;
  position: fixed;
  bottom: 0;
  line-height: 2.875rem;
  text-align: center;
  display: flex
}
.fudai {
  position: absolute;
  width: 100%;
  top: 20%;
  left: 22%;
}
.fudai img {
  width: 60%;
  height: 30%;
}
.fudai_none {
  /* display:absolute;
     left:10%;
     color:red */
}
/* .dialog-demo { */
.payWraps.dialog-demo .weui-dialog {
  border-radius: 8px;
  padding-bottom: 8px;
}
.payWraps.dialog-demo .dialog-title {
  line-height: 30px;
  color: #666;
}
.payWraps .dialog-demo .img-box {
  height: 350px;
  overflow: hidden;
}
.payWraps .dialog-demo .img-box img {
  height: 200px;
  width: 200px;
}
.payWraps .dialog-demo .vux-close {
  margin-top: 8px;
  margin-bottom: 8px;
}
.infoItem {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #ececec;
}
.infoIcons {
  width: 30px;
  padding-right: 8px;
  /* padding-left: 10px; */
  text-align: center;
  padding-top: 10px;
}
.infoIcons img {
  width: 40px;
  /* height: 40px; */
}
.mustchoose {
  width: 40px;
  height: 20px;
  background: #ff3b3b;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
  margin-top: 15px;
  font-size: 12px
}
.infoItem {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #ececec;
}
.infoTitles {
  line-height: 50px;
  flex: 1;
}
.marginDiv {
  margin-left: 1rem;
}
.checkPayWays{
  background: #ffffff;
  /* margin-top: 10px; */
  margin-top: 2.875rem;
  padding: 6px;
  
}
.zhifuMoney{
  flex: 1;
  text-align: left;
  padding-left: 10px;
  color: #e60012
}
.goFukuan{
  width: 90px;
  height: 46px;
  background: #e60012;
  color: #ffffff;
  line-height: 46px
}
/* } */
</style>
